<script setup lang="ts">
import { log } from "console";
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { getUser } from "@/api/user.ts";
import ContactCard from "@/components/ContactCard.vue";

let value = ref("");
let indexBar = ref();
let router = useRouter();
import { useStore } from "vuex";
const store = useStore();

let users = ref([]);
getUser().then((res) => {
  res.forEach((user) => {
    user.online = false;
  });
  users.value = res;
  // 更新
  updatedOnline(store.state.online);
});

// 刷新在线
function updatedOnline(res) {
  const online: [] = res.map((online) => online.userName);
  users.value.forEach((user) => {
    if (online.includes(user.userName)) {
      user.online = true;
    } else {
      user.online = false;
    }
  });
}

watch(
  () => store.state.online,
  (res) => {
    updatedOnline(res);
  },
  { immediate: true, deep: true }
);

let indexList = [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
];
let firstTop: number;
let elH = ref(0);

onMounted(() => {
  elH.value = document.querySelector(".van-nav-bar").offsetHeight - 1 || 42;
  let A: any = document.querySelector(".ListTop .van-index-anchor");
  firstTop = A.offsetTop - elH.value;
});

function selectIndex(i: string) {
  if (i === "A") {
    window.scrollTo(0, firstTop + 1);
  }
}

function goContactInfo(item) {
  router.push({
    path: "/contactInfo",
    query: item,
  });
}
</script>
<template>
  <div class="main">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-index-bar
      :sticky-offset-top="elH"
      :index-list="indexList"
      @select="selectIndex"
    >
      <!-- <van-index-anchor index="#" /> -->
      <ContactCard
        icon="https://img.yzcdn.cn/vant/apple-1.jpg"
        name="A文本"
        online
        v-for="i in 3"
        :key="i"
      />
      <van-index-anchor class="ListTop" index="A" />
      <ContactCard
        :online="item.online"
        :name="item.userName"
        v-for="item in users"
        :key="item.id"
        @click="goContactInfo(item)"
      />

      <!-- <van-index-anchor index="B" />
      <ContactCard name="B文本" v-for="i in 5" :key="i" />
      <van-index-anchor index="C" />
      <ContactCard name="C文本" v-for="i in 5" :key="i" />
      <van-index-anchor index="D" />
      <ContactCard name="D文本" v-for="i in 5" :key="i" />
      <van-index-anchor index="E" />
      <ContactCard name="E文本" v-for="i in 5" :key="i" />
      <van-index-anchor index="F" />
      <ContactCard name="文本" v-for="i in 5" :key="i" /> -->
    </van-index-bar>
  </div>
</template>

<style scoped lang="scss">
.van-search {
  background-color: var(--main-color);
  padding-left:0;
  padding: 20px 15px;
}
::v-deep {
.van-search__field {
  border-radius: 10px;
}
.van-search__content{
  padding: 0;
  background-color: var(--search-bgColor);
}

.van-index-bar__sidebar{
  color: var(--van-gray-8);
}
}
.van-index-bar {
  /* transform: translateY(100px); */
  // padding-top: 116px;
}
</style>